<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>课程详情页</title>
	<link rel="stylesheet" type="text/css" href="static_front/css/bootstrap.min.css">
	<!-- <link rel="stylesheet" type="text/css" href="static_front/css/font-awesome.css"> -->
	 <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	 <link rel="stylesheet" type="text/css" href="static_front/css/common.css">
	 <style type="text/css">
	 	.cate-nav dd{margin-right:22px; padding: 3px 15px; border-radius: 10px;}
	 	.cate-nav dd.current{background: #FDF0E5; color: #EC6833;}
	 	.course{width: 200px; margin-right: 15px; float: left;}
	 	.course-img{width:200px; border-radius: 6px;}

	 	.tab-nav a{margin-right: 30px; margin-left: 20px;}
	 </style>
</head>
<body>

<!--导航栏START-->
<nav class="navbar navbar-expand-md bg-light border-bottom">
  <a class="navbar-brand" href="#"><img src="https://7n.w3cschool.cn/statics/images/logonew2.png" width="120" /></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">课程列表</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"></a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="" aria-label="搜索">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>
<!--导航栏END-->

<!--课程大图START-->
<div class="container-fluid shadow-sm">
	<div class="container py-3">
		<nav aria-label="breadcrumb">
		  <ol class="breadcrumb bg-white">
		    <li class="breadcrumb-item"><a href="#">编程课程列表</a></li>
		    <li class="breadcrumb-item active" aria-current="page">HTML微课(含HTML5)</li>
		  </ol>
		</nav>
		<!--课程图片区域START-->
		<div class="row">
			<div class="col-5" style="">
				<img src="https://7n.w3cschool.cn/attachments/image/201910/big_56875_1378947.jpg?t=1571206351" class="rounded" width="100%" />
				<p class="mt-3 text-muted">信用卡 • 花呗 放心购，7天内不满意可退款</p>
			</div>
			<div class="col-6">
				<h3>HTML微课(含HTML5)</h3>
				<div class="text-muted">&nbsp;&nbsp;60 节&nbsp;&nbsp;|&nbsp;&nbsp;283 个小点&nbsp;&nbsp;|&nbsp;&nbsp;95.9k已学&nbsp;&nbsp;</div>
				<hr/>
				<div class="my-2 text-muted">你还未获得该课程证书，快去完成课程领取吧!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-credit-card-alt text-danger" aria-hidden="true"> 领取证书</i></div>
				<div class="my-3">
					<span class="h3 text-danger mr-5">¥39</span>
					<span class="bg-warning p-2 rounded text-secondary small">开通VIP会员，本门课程免费学 <a href="" class="btn-danger p-1 rounded-pill">立即开通</a></span>
				</div>
				<div class="" style="margin-top:38px"><button class="btn btn-warning mr-3">加到购物车</button><button class="btn btn-danger">立即下单</button></div>
			</div>
		</div>
		<!--课程图片区域END-->
	</div>
</div>
<!--课程大图END-->

<!--课程详情START-->
<div class="container-fluid bg-light py-3" style="">
	<div class="container">
		<div class="row">
			<div class="col-8 bg-white mr-1 p-2">
				<div class="border-bottom p-3 mb-3 tab-nav">
					<a href="#" class="text-danger h6">课程介绍</a>
					<a href="#" class="h6">课程目录</a>
					<a href="#" class="h6">评价</a>
				</div>
				<div>
					<img src="https://7n.w3cschool.cn/attachments/image/20190626/1561533040466127.png" width="100%" />
					<pre class="h6 mt-2">
购买须知
1. 本课程为图文内容+闯关形式，共60节。
2. 在课程学习中，如有任何使用上的问题，请联系客服微信号：bcshi666
（加微信可进相关交流群，与更多小伙伴讨论问题）。 
					</pre>
				</div>
			</div>
			<div class="col-3 bg-white p-3">
				<h6 class="border-bottom py-2">推荐课程</h6>
				<div class="clearfix mb-3">
					<img src="https://atts.w3cschool.cn/attachments/cover/cover_html5_job_my.png?t=1583809672" width="35%" class="rounded-lg pull-left" />
					<div class="pull-left ml-2">
						<span>HTML就业课程精讲</span><br/><small class="text-muted">1678已学</small>
					</div>
				</div>
				<div class="clearfix mb-3">
					<img src="https://atts.w3cschool.cn/attachments/cover/cover_html5_job_my.png?t=1583809672" width="35%" class="rounded-lg pull-left" />
					<div class="pull-left ml-2">
						<span>HTML就业课程精讲</span><br/><small class="text-muted">1678已学</small>
					</div>
				</div>
				<div class="clearfix mb-3">
					<img src="https://atts.w3cschool.cn/attachments/cover/cover_html5_job_my.png?t=1583809672" width="35%" class="rounded-lg pull-left" />
					<div class="pull-left ml-2">
						<span>HTML就业课程精讲</span><br/><small class="text-muted">1678已学</small>
					</div>
				</div>





			</div>
		</div>
	</div>
</div>
<!--课程详情END-->

<footer class="text-muted pt-3 bg-dark" style="height: 100px;">
  <div class="container">
    <p class="float-right">
      <a href="#">Back to top</a>
    </p>
    <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
    <p>New to Bootstrap? <a href="https://v4.bootcss.com/">Visit the homepage</a> or read our <a href="/docs/getting-started/introduction/">getting started guide</a>.</p>
  </div>
</footer>

	<script type="text/javascript" src="static_front/js/jquery.min.js"></script>
	<script type="text/javascript" src="static_front/js/bootstrap.min.js"></script>
</body>
</html>